<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人中心</title>
    <!-- zui -->
    <link rel="stylesheet" type="text/css" href="../css/normalize.css">
    <link rel="stylesheet" type="text/css" href="../css/zui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/doc.min.css">
    <style type="text/css">
    	body{background: #f3f3f3}
    	header{background: #ef673c;color: #fff}
    	h2{margin: 0;padding: .5em 0;font-weight: normal;}
    	.icon-arrow-left{font-size: inherit;}
    	header a{transform: translateY(50%);-webkit-transform: translateY(50%);color: #fff;display: block;}
    	a:focus, a:hover{color: #fff;text-decoration: none;}
    	.row{margin: 0}
    	.col-xs-4{margin-bottom: 1.6em}
    	.col-xs-4 span{display: block;line-height: 1.8em;background: #fff;border:1px solid #ccc;color: #999}
    	.col-xs-4 span.active{background: #ef673c;color: #fff;border:1px solid #ef673c;}
    </style>
</head>
<body class="hidden-md hidden-lg">
	<header class="clearfix">
		<div class="col-xs-2">
			<h2><i class="icon icon-arrow-left"></i></h2>
		</div>
		<div class="col-xs-8 text-center"><h2>关注</h2></div>
		<div class="col-xs-2 text-right">
			<a href="javascript:saveFollow();">保存</a>
		</div>
	</header>
	<div class="container">
		<div class="row" style="margin:1em 0 1.6em;color:#666">
			<div class="col-xs-12">关注领域</div>
		</div>
		<div class="row text-center tab">
			<div class="col-xs-4">
				<span class="active">股票</span>
			</div>
			<div class="col-xs-4">
				<span>基金市场</span>
			</div>
			<div class="col-xs-4">
				<span class="active">民间金融</span>
			</div>
			<div class="col-xs-4">
				<span>互联网金融</span>
			</div>
			<div class="col-xs-4">
				<span>期货</span>
			</div>
			<div class="col-xs-4">
				<span>基金</span>
			</div>
			<div class="col-xs-4">
				<span>民间金融</span>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
		$('.tab span').each(function() {
			$(this).click(function(){
				$(this)[0].className == 'active' ? $(this)[0].className = '' : $(this)[0].className = 'active';
			})
			$('.icon-arrow-left').click(function(){
				$('.wrapper', parent.document).show();
				$('iframe', parent.document).hide();
			})
		})

		function saveFollow(){
			var num = 0;
			var name = [];
			var str = '';
			$('.tab span').each(function() {
				if($(this)[0].className == 'active'){
				 	num++;
					name.push($(this).text());
				}
			})
			if(name.length == 0){
				alert('请至少选择一个关注');
			}else if(name.length == 1){
				str = name[0];
			}else if(name.length == 2){
				str = name[0] +'、'+ name[1];
			}else if(name.length > 2){
				str = name[0] +'、'+ name[1]+'等'+num+'个关注'
			}
			console.log(str);
			//return str;
			//window.parent.document.getElementById('follow').innerHTML = str;
			//window.parent.document.getElementsByTagName('iframe')[0].style.display = 'none';
			//window.parent.document.getElementById('wrapper').style.display = 'block';
			$('#follow', parent.document).html(str);
			$('.wrapper', parent.document).show();
			$('iframe', parent.document).hide();
		}
	</script>
</body>
</html>